<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0">
		<!-- 设置字符编码集为国际编码 -->
		<meta charset="utf-8">
		<!-- IE兼容模式 通知 IE 采用其所支持的最新的模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<!-- 360,qq浏览器等多核浏览器，优先采用webkit -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<!-- 引入 Bootstrap -->
		<link href="../../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
		
		<link rel="stylesheet" type="text/css" href="../../bootstrap-table-1.11.0-dist/bootstrap-table.min.css"/>
		
		<link rel="stylesheet" href="../datetime/daterangepicker-bs3.css" />
		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
		<!--[if lt IE 9]>
			 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
		
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="../jquery-1.11.3.min.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script src="../../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
		
		<script type="text/javascript" src="../../bootstrap-table-1.11.0-dist/bootstrap-table.min.js" ></script>
		<script type="text/javascript" src="../../bootstrap-table-1.11.0-dist/locale/bootstrap-table-zh-CN.min.js" ></script>
		
		<script src="../datetime/moment.js" type="text/javascript" charset="utf-8"></script>
		<script src="../datetime/daterangepicker.js" type="text/javascript" charset="utf-8"></script>
		<!-- 工具类 -->
		<script src="../util.js" type="text/javascript"></script>
		<style>
			.w30{width: 30px}
			
		</style>
	</head>
  <body>
	  	
	  	<div style="border:1px solid #999 ;width: 48%;float: left;margin-left: 1%;">
	  		<table id="table"
	  			data-initable='yes'
	  			   data-height="660"
	  			    class="table table-bordered table-bordered table-striped">
		  		<caption>caption</caption>
		  		<thead>
		  			<tr>
			  			<th colspan="5"><button id="bu" class="btn" type="button">button</button></th>
			  		</tr>
		  			<tr>
			  			<th class="w30"><input type="checkbox" id="abc" onclick="abc(this);"  onchange="abc(this);"/></th>
			  			<th>Header</th>
			  			<th>Header</th>
			  			<th>Header</th>
			  			<th>Header</th>
			  		</tr>
		  		</thead>
		  		<tbody>
		  			
		  		</tbody>
		  		<tfoot>
		  			<tr>
			  			<td><input type="checkbox" /></td>
			  			<td>tfoot1</td>
			  			<td>tfoot2</td>
			  			<td>tfoot3</td>
			  			<td>tfoot4</td>
			  		</tr>
		  		</tfoot>
	  		</table>
	  	</div>
	  	<div style="border:1px solid #999;width: 48%;float: left;margin-left: 2%;display: nonek;">
		  	<table id="table1" 
		  		data-initable='yes'
		  		 data-paginationId=""
		  		  data-PaginationUrl="tableInit-pagination.html"
		  		   data-toolBarid=""
		  		    data-toolBarUrl="tableInit-toolbar.html"
		  		     data-height="600"
		  		     data-minHeight="100"
		  		      class="table table-bordered table-bordered table-striped">
		  		<caption>caption</caption>
		  		<thead>
		  			<tr>
			  			<th colspan="5"><button class="btn" type="button">button</button></th>
			  		</tr>
		  			<tr>
		  				<th class="w30"><input type="checkbox"/></th>
			  			<th>Header</th>
			  			<th>Header</th>
			  			<th>Header</th>
			  			<th>Header</th>
			  		</tr>
		  		</thead>
		  		<tbody>
		  		</tbody>
		  		<tfoot>
		  			<tr>
		  				<th><input type="checkbox"/></th>
			  			<td>tfoot1</td>
			  			<td>tfoot2</td>
			  			<td>tfoot3</td>
			  			<td>tfoot4</td>
			  		</tr>
		  		</tfoot>
		  	</table>	
	  	</div>
			<div id='toolBar' class="hide"><div>123</div></div>
			<div id='paginationId' class="hide"><div>456</div></div>
  </body>
  <script type="text/javascript" src="tableInit-0.5.js" ></script>
  <script>
  	$(function(){
  		setTimeout(function(){
  			for (var i=0;i<100;i++) {
	  			var tr ='<tr>'+
	  							'	<td><input type="checkbox" /></td>'+
									'	<td class="opid">单号</td>'+
									'	<td>供应商编码</td>'+
									'	<td>供应商</td>'+
									'	<td>'+(i+1)+'</td>'+
									'</tr>';
			  	$("tbody").append(tr);
	  		}
  		
  		},10);
  		$(document).on("click",".btn",function(e){
  			var ev = e || window.event;
  			ev.stopPropagation();
  			alert("btn")
  		})
  		MaxTableInit(); 
  		$(document).on("click","#bu",function(){
  			alert("bu");
  		})
  		
  		
  	//	tableInit($("table[data-initable='yes']"))
  		/*new MaxTable($("#table"));
  		new MaxTable($("#table1"));*/
  		$("#table").attr("data-height",600)
  	//	new MaxTable(document.getElementById("table1"))
			 	MaxTableInit(); 		
  	});
  	function abc(obj){
  		alert("tbody--->"+$("#abc").parents("table").find("tbody").length)
  	}
  </script>
</html>